<template>
  <van-tab title="演出">
    <aside>
      <ul class="type-list">
        <li
          v-for="type in regionTypes"
          :class="{ active: type.fullname === nowAroundType }"
          @click="changeAroundType(type)"
          :key="type.fullname"
        >
          <span>{{ type.name }}</span>
        </li>
      </ul>
    </aside>
    <article @scroll="aroundScrollEvt">
      <van-card
        v-for="item in showList"
        @click="jpEvt(item.id)"
        :key="item.id"
        :title="item.project_name"
        :thumb="myBaseUrl + item.cover"
        :desc="`地区：${item.city}`"
      >
        <template #tags>
          <van-tag v-for="it in item.tags" :key="it" plain type="danger">{{
            it
          }}</van-tag>
        </template>
        <template #price>
          <span class="price">
            <span
              >￥<em>{{ item.price_low }}</em
              >起</span
            >
            <br />
            <strong>{{ item.wish }}人想参加</strong>
          </span>
        </template>
      </van-card>
    </article>
  </van-tab>
</template>

<script>
import { cityApi, showListApi, getDetailHotListApi } from "../../apis/typeApi";
export default {
  data() {
    return {
      myBaseUrl: "http://localhost:15666/",
      regionTypes: [],
      showList: [],
      nowAroundType: "",
      aroundPage: 1,
      aroundLoading: true,
      aroundHasMore: true,
    };
  },
  created() {
    this.cityApiTypes();
  },
  methods: {
    async cityApiTypes() {
      let result = await cityApi();
      let arr = result?.data || [];
      arr.unshift({ name: "全部", fullname: "" });
      this.regionTypes = arr;

      this.getShowList();
    },
    async getShowList() {
      let result = await showListApi({
        page: this.aroundPage,
        size: 10,
        city: this.nowAroundType,
        name: "",
      });
      if (result.code === 200) {
        let _arr = result.data.rows.map((it) => {
          it.tags = Array.from(new Set((it.ipRightName || "").split(",")));
          return it;
        });
        this.showList = this.aroundPage === 1 ? _arr : this.showList.concat(_arr);
        this.aroundHasMore = this.aroundPage * 10 < result.data.total;
        console.log(this.showList);
      }

      setTimeout(() => {
        this.aroundLoading = false;
      });
    },

    changeAroundType(type) {
      this.aroundLoading = true;
      this.nowAroundType = type.fullname;
      this.aroundPage = 1;
      this.aroundList = [];
      this.getShowList();
    },
    aroundScrollEvt(evt) {
      let isBot =
        evt.target.scrollTop +
          evt.target.clientHeight -
          evt.target.scrollHeight >
        -100;
      if (!this.aroundLoading && this.aroundHasMore && isBot) {
        this.aroundLoading = true;
        this.aroundPage += 1;

        this.getShowList();
      }
    },
    async jpEvt(id) {
      let res = await getDetailHotListApi(id);
      console.log(res)
      let myData = sessionStorage.getItem("myData");
      if (!myData) {
        sessionStorage.setItem("myData", JSON.stringify(res));
        this.$router.push("/details");
        return;
      }
      sessionStorage.removeItem("myData");
      sessionStorage.setItem("myData", JSON.stringify(res));
      this.$router.push("/details");
    },
  },
};
</script>

<style lang="less" scoped>
.van-tab__pane {
  display: flex;
  height: 100%;
  > aside,
  > article {
    flex: 1;
    width: 0;
    height: 100%;
    background: #fff;
    overflow-x: hidden;
  }
  > aside {
    flex: 0 0 110px;
    background: #f6f7fb;
  }
}

.type-list {
  display: block;
  height: 100%;
  overflow-x: hidden;
  li {
    display: block;
    position: relative;
    height: 42px;
    line-height: 42px;
    font-size: 0.8rem;
    color: #70798a;
    padding-left: 10px;
    white-space: nowrap;
    background: transparent;
    &.active {
      color: #e60014;
      background: #fff;
      font-weight: bold;
      &::before {
        content: "";
        display: block;
        position: absolute;
        top: 10px;
        left: 4px;
        width: 14px;
        height: 14px;
        background: #d6f5ed;
        border-radius: 50%;
        z-index: 0;
      }
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        right: 0;
        width: 16px;
        height: 16px;
        margin-top: -8px;
        background: url(../../images/right.png) center center / 100% 100%
          no-repeat;
        z-index: 6;
      }
    }
    span {
      position: relative;
      z-index: 3;
    }
  }
}

.van-card {
  margin: 0 8px;
  padding: 12px 8px;
  border-bottom: solid 1px #ddd;
  background-color: #fff;
  .van-card__title {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 0.75rem;
  }
  .van-card__thumb {
    height: 106px;
  }
  .price {
    display: block;
    line-height: 20px;
    span {
      font-size: 0.65rem;
      font-weight: 400;
      color: #d4380d;
      em {
        font-size: 0.9rem;
        font-weight: 600;
        font-style: normal;
      }
    }
    strong {
      margin-left: 4px;
      font-size: 0.6rem;
      color: #999;
      font-weight: 400;
    }
  }
}

.more-text {
  display: block;
  position: relative;
  text-align: center;
  font-size: 0.7rem;
  color: #bec7d9;
  line-height: 32px;
}
</style>